<template>
	<!-- 知识百科 -->
	<view class="content">
		<!-- 状态栏 -->
		<view class="statusBar"></view>
		<!-- 导航栏 -->
		<view class="navigationBar flex-col justify-center ">
			<view class="navigationBar-in  justify-between align-center">
				<image @click="toBack" class="back" src="/subPages/static/index/knowledge/back.png" mode=""></image>
				<view class="title">知识百科</view>
				<image class="filter" @click="popupShow = !popupShow;" src="/subPages/static/index/knowledge/filter.png"
					mode=""></image>
				<view class="popup" v-show="popupShow">
					<view class="item" @click="tabList(1)" :class="{ 'active': type == 1 }">
						合作伙伴
					</view>
					<view class="item" @click="tabList(2)" :class="{ 'active': type == 2 }">
						病虫害知识库
					</view>
				</view>
			</view>
		</view>
		<!-- 导航栏背景 -->
		<view class="navigationBar-bg"></view>
		<!-- search搜索框 -->
		<u-search class="search" height="2.5rem" searchIcon="/static/app/search.png" searchIconSize="16"
			placeholder="请输入搜索内容" placeholderColor="#999" shape="square" v-model="keyword" @custom="searchFn">
		</u-search>
		<view class="knowLists flex-wrap justify-between" v-if="type == 1">
			<view class="knowItem" v-for="item in lists" :key="item.id" @click="toCoopDetail(item.id)">
				<image class="item-image" :src="item.partnerImg || '/static/index/default.png'" mode="scaleToFill">
				</image>
				<view class="item-title">{{ item.partnerName }}</view>
				<view class="item-text">{{ item.partnerIntro }}</view>
				<view class="item-logo">
					{{ $util.getDictData('cooperative_partner_partner_type',item.partnerType) }}
				</view>
			</view>
		</view>
		<view class="knowLists flex-wrap justify-between" v-else>
			<view class="knowItem" v-for="item in lists" :key="item.id" @click="toDamageDetail(item.id)">
				<image class="item-image" :src="item.diseaseImgList.split(',')[0]" mode="scaleToFill"></image>
				<view class="item-title">{{ item.diseaseName }}</view>
				<view class="item-text">{{ item.diseaseIntro }}</view>
				<view class="item-logo1">
					<image style="width:7.5rem;height:2rem" src="/subPages/static/index/knowledge/pestLogo.png" mode="">
					</image>
				</view>
			</view>
		</view>
		<u-loadmore class="loadmore" :status="status" />
	</view>
</template>

<script>
import {getCoopList, getPestsList} from '@/api/index/knowledge.js'

export default {
		data() {
			return {
				type: 2,
				popupShow: false,
				keyword: '',
				lists: [],
				status: 'loading',
				pageInfo: {
					pageNo: 1,
					pageSize: 12
				}
			};
		},
		onLoad() {
			this.getPestsListFn();
		},
		methods: {
			// 加载初始化函数
			initFn() {
				uni.pageScrollTo({
					scrollTop: 0
				})
				this.loading = true
				this.pageInfo = {
					pageNo: 1,
					pageSize: 12
				}
				this.lists = []
			},
			// 搜索函数
			async searchFn(res) {
				this.popupShow = false;
				this.initFn()
				if (this.type == 1) {
					this.getCoopListFn();
				} else {
					this.getPestsListFn();
				}
			},
			// 跳转病虫害详情页
			toDamageDetail(id) {
				uni.navigateTo({
					url: '/subPages/index/damageDetail/index?id=' + id
				})
			},
			// 跳转合作伙伴详情页
			toCoopDetail(id) {
				uni.navigateTo({
					url: '/subPages/index/coopDetail/index?id=' + id
				})
			},
			// 请求合作伙伴数据
			async getCoopListFn() {
				let res = await getCoopList({
					...this.pageInfo,
					partnerName: this.keyword
				});
				if (res.list.length < this.pageInfo.pageSize) {
					this.status = 'nomore'
				}
				res.list.forEach(v => {
					if (!v.partnerImg) {
						v.partnerImg = ''
					}
				})
				this.lists = this.lists.concat(res.list);
				this.loading = false
			},
			// 请求病虫害数据
			async getPestsListFn() {
				let res = await getPestsList({
					...this.pageInfo,
					diseaseName: this.keyword
				});
				if (res.list.length < this.pageInfo.pageSize) {
					this.status = 'nomore'
				}
				res.list.forEach(v => {
					if (!v.diseaseImgList) {
						if (v.diseaseType == 1) {
							v.diseaseImgList = '/static/index/default2.png'
						} else {
							v.diseaseImgList = '/static/index/default.png'
						}

					}
				})
				this.lists = this.lists.concat(res.list);
				this.loading = false
			},
			// 返回
			toBack() {
				if (getCurrentPages().length < 2) {
					uni.switchTab({
						url: '/pages/index/index'
					})
				} else {
					uni.navigateBack()
				}
			},
			// tab切换
			tabList(type) {
				this.keyword = ''
				this.popupShow = false;
				if (type != this.type) {
					this.initFn()
					this.type = type
					if (this.type == 1) {
						this.getCoopListFn()
					} else {
						this.getPestsListFn()
					}
				}
			}
		},
		onReachBottom() {
			this.pageInfo.pageNo++
			if (this.type == 1) {
				this.getCoopListFn()
			} else {
				this.getPestsListFn()
			}
		}

	}
</script>

<style lang="scss" scoped>
	.content {
		color: #333;
		font-size: 1.4rem;
		background: #F5F5F5;
		min-height: 100vh;

		// 状态栏
		.statusBar {
			width: 100%;
			height: var(--status-bar-height);
			background-color: #fff;
			position: fixed;
			top: 0;
			z-index: 1000;
		}

		// 导航栏
		.navigationBar {
			position: fixed;
			top: var(--status-bar-height);
			width: 100%;
			height: 44px;
			background-color: #fff;
			z-index: 10000;

			.navigationBar-in {
				position: relative;
				padding: 0 2rem;
				height: 44px;

				// 返回按钮
				.back {
					width: 20px;
					height: 20px;
				}


				// 标题
				.title {
					font-size: 16px;
					font-weight: bold;
				}

				// 筛选
				.filter {
					width: 20px;
					height: 20px;
				}

				// 筛选弹窗
				.popup {
					width: 7.5rem;
					height: 8.1rem;
					position: absolute;
					right: 1rem;
					bottom: 0;
					transform: translate(0, 100%);
					border-radius: .4rem;
					overflow: hidden;
					box-shadow: 0 .3rem .6rem .1rem rgba(0, 0, 0, 0.16);
					font-size: 1.2rem;
					line-height: 3.5rem;
					text-align: center;
					z-index: 10000;

					.item {
						height: 4.05rem;
						background: #fff;
					}

					.item.active {
						color: #fff;
						background: #53936C;
					}
				}
			}
		}

		.navigationBar-bg {
			height: calc(44px + 5rem + var(--status-bar-height))
		}

		// 搜索框
		.search {
			position: fixed;
			top: calc(var(--status-bar-height) + 44px);
			width: 100%;
			padding: .5rem 2rem;
			height: 5rem;
			background: #fff;
			z-index: 1000;
		}

		// 知识列表
		.knowLists {
			padding: 0 10rpx;

			.knowItem {

				// 手机
				@media screen and (max-width: 767px) {
					width: 360rpx;
				}

				//平板
				@media screen and (min-width: 768px) and (max-width: 992px) {
					width: 238rpx;
				}

				border-radius: .4rem;
				margin: .5rem 0;
				background: #fff;

				.item-image {
					width: 100%;

					// 手机
					@media screen and (max-width: 767px) {
						height: 360rpx;
					}

					//平板
					@media screen and (min-width: 768px) and (max-width: 992px) {
						height: 238rpx;
					}
				}

				.item-title {
					font-size: 1.2rem;
					font-weight: bold;
					line-height: 1.5rem;
					padding: .25rem 1rem;
				}

				.item-text {
					height: 3rem;
					font-size: 1rem;
					color: #999999;
					line-height: 1.5rem;
					display: -webkit-box;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					padding: 0 1rem;
				}

				.item-logo {
					margin: .5rem 1rem 1rem;
					width: 7rem;
					font-size: .8rem;
					text-align: center;
					border: .1rem solid rgba(251, 116, 41, .2);
					border-radius: 1.25rem;
					color: rgba(251, 116, 41, .7);
				}

				.item-logo1 {
					padding: .5rem 1rem;
				}
			}
		}

		.loadmore {
			margin: 0 !important;
			padding: 1.5rem 0;
		}
	}
</style>
